<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
<head>
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>
<body>

<dom-module id="x-host">
  <template>
    <h1>1 + [[foo]] = [[bar]]</h1>
    <x-child id="child" foo="[[foo]]" bar="{{bar}}"></x-child>
  </template>

  <script type="module">
import { PolymerElement } from '../../polymer-element.js';
class XHost extends PolymerElement {
  static get config() {
    return {
      properties: {
        obj: {
          observer: 'objChanged'
        }
      }
    }
  }
  objChanged(val, old) {
    console.log('new', val, 'old', old);
  }
  _shouldPropertyChange(prop, val, old) {
    if (this.strict) {
      return val !== old;
    } else if (val instanceof Date) {
      return !(old instanceof Date) || val.getTime() !== old.getTime();
    } else {
      return super._shouldPropertyChange(prop, val, old);
    }
  }
}
customElements.define('x-host', XHost);
</script>
</dom-module>

<x-host id="host"></x-host>

<script type="module">
var obj = {foo: true};
host.obj = obj;
host.obj = obj;
console.log('strict on')
host.strict = true;
host.obj = obj;
console.log('strict off')
host.strict = false;
host.obj = obj;
host.obj = new Date();
host.obj = new Date(host.obj.getTime());
</script>

</body>
</html>
